
// 首页业务
//  调用用户名
renderUser()
// 调用鉴权
checkLogin()

// 退出登录
logout()


// 渲染统计数据
async function getData(){
const{data:{
    overview,year,salaryData,groupData,provinceData
}}=await axios.get('/dashboard')

// 调用函数，渲染概览数据
renderOverview(overview)
// 调用函数，渲染薪资走势
renderYearSalary(year)
// 调用函数，渲染薪资分布
renderSalary(salaryData)
// 调用函数，渲染分组数据
renderGroup(groupData)

// 男女薪资分布
renderGenderData(salaryData)
// 调用函数，渲染籍贯分布
renderProvince(provinceData)
}
getData()

    
// 1.概览业务-overview
function renderOverview(overview){
    Object.keys(overview).forEach((key)=>{
        document.querySelector(`.${key}`).innerHTML=overview[key]
    })
}

// 2.薪资走势-year
function renderYearSalary(year){
    // 初始化echarts实例
    const myChart=echarts.init(document.querySelector('#line'))
    // 设置配置项
    const option={
        xAxis: {
            // type: '2024全学科薪资走势',
            // left:13,
            // top:10,
            boundaryGap: false,
            data:year.map(item=>item.month),
            axisLine:{
              lineStyle:{
                // color:'#999',
                type:'dashed'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine:{
              lineStyle:{
                type:'dashed'
              }
            }
          },
          series: [
            {
              data: year.map(item=>item.salary),
              type: 'line',
              areaStyle: {
                color: {
                  type: 'linear',

                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#9bd7fb' // 0% 处的颜色
                }, {
                    offset: 1, color: '#f1fbfb' // 100% 处的颜色
                }],
              }
              },
              smooth:true,
            //   标记大小
              symbolSize:5,
            //   线条样式
              lineStyle:{
                width:3,
                color:{
                     type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#a0d0fb' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#426cf0' // 100% 处的颜色
                        }],
                }
            }


            }
          ]
    };
    // 使用配置项，显示图表
    myChart.setOption(option)
}

// 3.薪资分布-salaryData
function renderSalary(salaryData){
    // 初始化echarts实例
    const myChart=echarts.init(document.querySelector('#salary'))
    // 设置配置项目
    const option={
      title:{
        text:'班级薪资分布',
        left:10,
        top:10
      },
      // 提示组件
      tooltip: {
        trigger: 'item',
        // data是提示内容
        data:['班级薪资分布']
      },
      // 图例组件
      legend: {
       bottom: '5%',
        left: 'center'
      },
      series: [
       
        {
          // 和提示组件中的data的值保持一致
          name: '班级薪资分布',
          type: 'pie',
          radius: ['50%', '60%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data:salaryData.map(item=>{
            return{value:item.g_count+item.b_count,name:item.label}
          })
          //  [
          //   { value: 1048, name: 'Search Engine' },
          //   { value: 735, name: 'Direct' },
          //   { value: 580, name: 'Email' },
          //   { value: 484, name: 'Union Ads' },
            
          // ]
          
        }
      ],
      // 设置图表的颜色，数组中的颜色设置顺序是顺时针
      color:['#f0a645','#3f8cfb','#28b9fb','#25d28e']
    };
    // 使用配置项，显示图表
    myChart.setOption(option)
}

// 4分组数据-groupData
function renderGroup(groupData){
    // 初始化echarts实例
    const myChart=echarts.init(document.querySelector('#lines'))
    // 设置配置项目
    const option={
      xAxis: {
        type: 'category',
        // 名字
        data: groupData[1].map(item=>item.name),
        axisLine:{
          lineStyle:{
            color:'#999',
            type:'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
         splitLine:{
          lineStyle:{
            type:'dashed'
          }
        }
      },
      series: [
        // 期待薪资
        {
          data: groupData[1].map(item=>item.hope_salary),
          type: 'bar',
          itemStyle:{
              color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#70d2a2' // 0% 处的颜色
              }, {
                  offset: 1, color: '#ccefde' // 100% 处的颜色
              }],
           
            },
          }
        },
        // 实际薪资
        {
          data: groupData[1].map(item=>item.salary),
          type: 'bar',
          itemStyle:{
            color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#6faff9' // 0% 处的颜色
            }, {
                offset: 1, color: '#d2e3f8' // 100% 处的颜色
            }],
         
          },
        }
        }
      ]
    };
    // 使用配置项，显示图表
    myChart.setOption(option)

    // 点击切换分组数据
    const btns=document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
      if(e.target.classList.contains('btn')){
      //  高亮切换
      // 删除类'btn-blue'
      document.querySelector('.btn-blue').classList.remove('btn-blue')
      // 添加类'btn-blue'
      e.target.classList.add('btn-blue')
      // 点击不同的组，显示不同的数据
      // 展示不同的分组数据->核心要修改什么？->
      // 更改option内的配置内容（索引）
      // 1.xAxis轴中的data 值 2.series中的data值
      const index=e.target.innerHTML
      // console.log(groupData[index]);
      // 给option内的配置项 更换数据
      option.xAxis.data=groupData[index].map(item=>item.name)
      option.series[0].data=groupData[index].map(item=>item.hope_salary)
      option.series[1].data=groupData[index].map(item=>item.salary)
      
      // 重新设置配置项，显示图表
    myChart.setOption(option)

      
      }
    })

}

// 5.男女薪资分布-genderData
function renderGenderData(salary){
  // 初始化echarts实例
  const myChart=echarts.init(document.querySelector('#gender'))
  // 设置配置项目
// const datas = [
//     ////////////////////////////////////////
//     [
//       { name: '圣彼得堡来客', value: 5.6 },
//       { name: '陀思妥耶夫斯基全集', value: 1 },
//       { name: '史记精注全译（全6册）', value: 0.8 },
//       { name: '加德纳艺术通史', value: 0.5 },
      
//     ],
//     // ////////////////////////////////////////
//     [
//       { name: '银河帝国5：迈向基地', value: 3.8 },
//       { name: '俞军产品方法论', value: 2.3 },
//       { name: '艺术的逃难', value: 2.2 },
//       { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
     
//     ],
  
//   ];
const datas=[
salary.map(item=>{
  return {name:item.label,value:item.b_count}
}),
salary.map(item=>{
  return {name:item.label,value:item.g_count}
}),
]
  const option={
    
      title: [
        {
        text: '男女薪资分布',
        left: 10,
        top:10,
        textStyle: {
       
          fontWeight: 'normal',
          fontSize: 16
        }
        },
        {
        text: '男生',
        left: 'center',
        top:'42%',
        textStyle: {
          color: '#999',
          fontWeight: 'normal',
          fontSize: 14
        }
      },
      {
         text: '女生',
        left: 'center',
        bottom:'5%',
        textStyle: {
          color: '#999',
          fontWeight: 'normal',
          fontSize: 14
        }
      }
        ],
        tooltip:{
          trigger:'item'
        },
      series: datas.map(function (data, idx) {
        var top = idx * 40+10;
        return {
          type: 'pie',
          radius: [30, 50],
          top: top + '%',
          height: '33.33%',
          left: 'center',
          width: 300,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          data: data,
          color:['#fb9a2a','#1b8ffb','#00bcfb','#00da8a']
        };
      })
    
  };
  // 使用配置项，显示图标表
  myChart.setOption(option)
}

// 6籍贯分布-provinceData
function renderProvince(mapData){
  // 初始化echarts实例
  const myChart=echarts.init(document.querySelector('#map'))
  // 设置配置项目

  // 因为所有的省份都要存在
  // 后台返回的数据是，有学生个数的省份
  // 后期拿到返回的数据，要把学生的个数给dataList中的value
  // 学生个数在返回的数据中  value里面->把后台value值给dataList的value

    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
    // 1.将所有有学生数据的省份找出来
    dataList.forEach(item=>{
      // find找数组元素  includes判断字符串是否包含 
      const res=mapData.find(ele=>ele.name.includes(item.name))
      console.log(res);
      if(res){
        // 2.那后台返回的value值给dataList中的value
        item.value=res.value
      }
      
    })
   const option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
 
  // 使用配置项，显示图标
  myChart.setOption(option)
}




























// // 渲染统计数据
// async function getData(){
//     const token=localStorage.getItem('token')
//     const{data:{
//         overview,year,salaryData,groupData,provinceData
//     }}=await axios.get({
//         url:'/dashboard',
//         // 请求需要携带token才能拿到数据
//         headers:{
//             Authorization:token
//         }
//     })
//     document.querySelector('.salary')=overview.salary
//     document.querySelector('.student_count')=overview.student_count
//     document.querySelector('.age')=overview.age
//     document.querySelector('.group_count')=overview.group_count
    
//     // 拿到对象中的属性名放到数组中
//     // /console.log(Object.keys(overview));
    
//     // Object.keys(overview).forEach((key)=>{
//     //     document.querySelector(`.${key}`).innerHTML=overview[key]
//     // })
//     }
//     getData()
